<template>
    <div class="main">
        <div class="main-left">
        </div>
        <div class="main-right">
            <el-form :model="formData" :rules="rules" ref="formData" :inline="true">
                <div>
                    <h2 style="margin: 40px 0px 15px; font-family: '楷体';color: rgb(185, 66, 100);">用户注册</h2>
                </div>
                <el-form-item label="账 号：" prop="account" class="frm">
                    <el-input v-model="formData.account" placeholder="账号" class="ipt"></el-input>
                    <transition name="fade">
                        <p style="color:red;font-size: 12px; position: absolute; left: 0px; top: 30px;" v-if="flag">账号热门，已经被占用</p>
                    </transition>
                </el-form-item>
                <el-form-item label="名 称：" prop="username" class="frm">
                    <el-input v-model="formData.username" placeholder="用户名" class="ipt"></el-input>
                </el-form-item>
                <el-form-item label="密 码：" prop="password" class="frm" >
                    <el-input type="password" v-model="formData.password" placeholder="密码"  class="ipt"></el-input>
                </el-form-item>
                <el-form-item label="邮 箱：" prop="userEmail" class="frm" >
                    <el-input v-model="formData.userEmail" placeholder="邮箱"  class="ipt"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register" style="margin-left: 60px; margin-top: 20px; height: 40px; width: 180px;">注册</el-button>
                </el-form-item>
            </el-form>
            <div class="bottom">
                <router-link to="/login/index">已有账号？</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {validAccount,register} from '@/api/user/user'
export default {
    name:'Register',
    data(){
        const validEmail = (rule,value,callback) => {
            let regex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            if(regex.test(value)){
                callback()
            }else{
                callback(new Error('邮箱不符合'))
            }
        }
        /**
         * 自定义账号验证
         * @param {*} rule 
         * @param {*} value 
         * @param {*} callback 
         */
        const checkAccount = (rule,value,callback)=>{
            if(!value){
                return callback(new Error('账号不允许空'))
            }else{
                validAccount(value).then(resp =>{
                    if(resp.data){
                        return callback(new Error('账号已经被注册'))
                    }else{
                        return callback();
                    }
                })
            }
        }
        return{
            formData:{
                account:'',
                username:'',
                password:'',
                userEmail:'',
                role:2
            },
            flag:false,
            rules:{
                account:[{required:true,validator:checkAccount,trigger:'change'}],
                username:[{required:true,message:'请输入姓名',trigger:'blur'}],
                password:[{required:true,message:'请输入密码',trigger:'blur'}],
                userEmail:[{required:true,validator:validEmail,trigger:'blur'}],
            }
        }
    },
    methods:{
        register(){
            this.$refs.formData.validate(valid => {
                if(valid){
                    register(this.formData).then(resp =>{
                        if(resp.code == 200){
                            this.$notify({
                                title:"",
                                message:resp.message,
                                type:'success'
                            })
                            this.$router.push("/login/index?redirect="+new Date().getTime())
                        }
                    }).catch(error =>{
                        this.$message.error(resp.message)
                    })
                }
            })

        },
        // validAccount(){
        //     if(this.formData.account > 0){
        //         validAccount(this.formData.account).then(resp=>{
        //             if(resp.data){
        //                 this.flag = true;
        //             }else{
        //                 this.flag = false;
        //             }
        //         })
        //     }
        // },
    },
}
</script>

<style scoped>
    *{
        margin: 0px;
        padding: 0px;
    }
    a{
        text-decoration: none;
    }
    .bottom{
        margin-top: 35px;
        margin-left: 240px;
        font-size: 13px;
    }
    .ipt{
        width: 250px;
    }
    .frm{
        margin: 20px 0px 15px;
    }
    .main{
        width: 70%;
        height: 600px;
        margin: 0px auto;
    }
    .main-left{
        float: left;
        width: 65%;
        height: 600px;
        background: url('@/assets/register/register.png');
        background-size: 100% 100%;
    }
    .main-right{
        float: left;
        width: 35%;
        height: 600px;
    }
    a:hover{
        text-decoration: underline;
    }


</style>